<template>
  <div class="">
    <Header>
      <span slot="middle">热门MV</span>
    </Header>

    <div
      class="playmusic"
      v-for="item in singers"
      :key="item.id"
     @click="gomvs(item.id)"
    >
      <img :src="item.cover" alt="" />
      <div class="right">
        <p>歌曲:{{ item.name }}</p>
        <p>歌手:{{ item.artistName }}</p>
      </div>
    </div>
  </div>
</template>

<script>
import Header from "../../components/NavBar.vue";
import { getMvs } from "../../api/music";
export default {
  data() {
    return {
      singers: [],
    };
  },
  computed: {},
  watch: {},

  methods: {
    //获取最新mv
    async getmvs(num) {
      const result = await getMvs(num);
      console.log(result);
      this.singers = result.data;
    },
    //跳转mv播放页面
    gomvs(id){
      this.$router.push(`/singersongs/${id}`)
    },
  },
  created() {
    this.getmvs(60);
  },
  mounted() {},
  components: {
    Header,
  },
};
</script>
<style scoped>
.playmusic {
  display: flex;
  justify-content: space-between;
  padding: 10px;
}
.playmusic img {
  display: block;
  width: 100px;
}
.playmusic .right {
  flex: 1;
  padding-left: 10px;
}
</style>